﻿@model IEnumerable<MvcApplication1.Models.Category>
@{
    ViewBag.Title = "Test";
}
@{
    var grid = new WebGrid(Model);
    grid.Pager(WebGridPagerModes.NextPrevious);
    /*
    @grid.GetHtml(tableStyle: "WebGrid",
                htmlAttributes: new { id = "DataTable" },
                columns: grid.Columns (
                    grid.Column("CategoryID"),
                    grid.Column("CategoryName")
                            ));
     * */
}
<h2>Test</h2>
<h2>All @ViewBag.Mess page</h2>
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $.getJSON("/Product/EfficientPaging", null, function (d) {
            //add the dynamic Webgrid to the body
            $("#content").append(d.Data);

            //create the footer
            var footer = createFooter(d.Count);

            $("#DataTable tfooter a").live("click", function (e) {
                e.preventDefault();
                var data = {
                    page: $(this).text()
                };

                $.getJSON("/Product/EfficientPaging", data, function (html) {
                    //add the data to the table
                    $("#DataTable").remove();
                    $("#content").append(html.Data);

                    //re-add the footer
                    $("#DataTable thead").after(footer);
                });
            });
        });
    });

    function createFooter(d) {
        var rowsPerPage = 10;
        var footer = "<tfooter>";
        for (var i = 1; i <= d; i++) {
            footer = footer + "<a href=#>" + i + "</a>&nbsp;";
        }
        footer = footer + " - All " + d + "page" + "</tfooter>";
        $("#DataTable thead").after(footer);
        return footer;
    }   
</script>
<ol>
@foreach (var category in Model)
{
    <li>
        @category.CategoryName <br />
        <h2>Sub Category</h2>
        <ul title="Sub Category">
        @foreach (var subCats in @category.SubCategoryList)
        {
            <li>
            @Html.ActionLink(subCats.CategoryName, "Browse", "Product", new { id = subCats.CategoryID }, new { @class = "test"})
            </li>
        }
        </ul>
        <h2>Product</h2>
        <ul title="Product">
        @foreach (var product in @category.Products)
        {
            <li>
            @Html.ActionLink(product.ProductName, "Details", "Product", new { id = product.ProductID }, null)
            </li>
        }
        </ul>
    </li>
}
</ol>
